<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <style>
        .order{

        }
        .order ul,li{
            margin-left: 20px;
            margin-right: 20px;
          list-style: none;
          float:left;
        }
        .table{
            position: absolute;
            margin-top: 100px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div>
    <div class="order">
        <ul>
            <li id="all"><a>全部订单</a></li>
            <li id="wait_pay"><a>待支付</a></li>
            <li id="wait_receive"><a>待收货</a></li>
            <li id="refund"><a>退款订单</a></li>
            <li id="finished"><a>已完成订单</a></li>
        </ul>
    </div>
    <div class="table">
        <table></table>
    </div>
</div>
<script>
    $(document).ready(function () {
        $("li").on("click",function () {
            var state = $(this).attr("id");
            if(state=="all"){
                state="";
            }else if(state=="wait_pay"){
                state="0";
            }else if(state=="wait_receive"){
                state="1";
            }else if (state=="refund"){
                state="2";
            } else  if(state=="finished"){
                state="4";
            }
            $.ajax({
                url:"../order?method=toMyOrder",
                type:"get",
                data:{"state":state},
                dataType:"json",
                success:function (data) {
                    $("tr").remove();
                    //存储需要追加的内容
                    var str = "";
                    //遍历后台传过来的List集合的方法
                    $.each(data,function (index,item) {
                        str+="<tr>"
                        str = str+"<td>订单编号："+item.order_no+"</td>";
                        str=str+"<td>商品名称："+item.goods_name+"</td>";
                        str=str+"<td>商品描述："+item.description+"</td>"
                        str=str+"<td>收货人："+item.user+"</td>";
                        str=str+"<td>收货号码："+item.phone+"</td>";
                        str=str+"<td>收货地址："+item.address+"</td>";
                        if(item.state=="1"){
                            str+="<td><a href='/order?method=changeOrderState&state=3&order_no="+item.order_no+"'>确认收货</a><a href='../order?method=changeOrderState&state=2&order_no="+item.order_no+"'>退款</td>";
                        }else if(item.state=="0"){
                            str+="<td><a href='../alipay?method=pay&order_id="+item.order_id+"'>付款</td>";
                        }else if(item.state=="2"){
                            str+="<td>退款中</td>";
                        }else if(item.state=="3"){
                            str+="<td>已退款</td>";
                        }else if(item.state=="4"){
                            str+="<td>已完成</td>";
                        }
                    })
                    $("table").append(str);

                },error:function () {
                    alert("数据异常")
                }
            })
        })
        $("ul a").on("click",function (e) {
           e.preventDefault();
        })
    })
</script>
</body>
</html>